<div class="top-page container-fluid pt-5">
  <div class="top-schedule-header card">
    <div class="card-header C-card">
      {{currentDate}}
    </div>
    <div class="card-body p5 pt-5">
      <div class="schedule-content ">
        <div class="schedule-list row">
          {{each scheduleLis as item}}
            <div class="schedule-item ">
              <div class="schedule-item-header">
                <div>{{item.label}}</div>
                {{if item.isToday}}
                  <div class="schedule-data current">{{item.days}}</div>
                {{else}}
                  <div class="schedule-data">{{item.days}}</div>
                {{/if}}
              </div>
              {{if item.content.length}}
                <div class="schedule-item-content has-content">
              {{else}}
                <div class="schedule-item-content">
              {{/if}}
                {{each item.content as child}}
                  {{if child.type === 'special'}}
                    <p style="margin-bottom: 0;font-size: 14px; color: #60C5FF;">{{child.content}}</p>
                  {{else}}
                    <p style="margin-bottom: 0;font-size: 14px;">{{child.content}}</p>
                  {{/if}}
                {{/each}}
              </div>
              {{if $index + 1 === scheduleLis.length}}
                <div class="schedule-operate">
                  <div class="operate-select">
                    <select class="form-control form-control-sm">
                      <option>グループ</option>
                    </select>
                  </div>
                  <div class="operate-icon">
                  </div>
                </div>
              {{/if}}
            </div>
          {{/each}}
        </div>
      </div>
    </div>
  </div>
  <div class="top-schedule-content">
    <div class="row">
      <div class="col-6">
        <div class="card">
          <div class="card-header C-card top-schedule-content-card-header">
            <div class="top-schedule-content-card-header-img">
              <img src="../../static/images/timecard_active.png" alt="">
              タイムカード
            </div>
            <div class="top-schedule-content-card-header-edit">
              <img src="../../static/images/edit.png" alt="">
            </div>
          </div>
          <div class="card-body top-schedule-content-card-content">
            <div class="time-card-list">
              <div class="time-card-item">
                <p>出社</p>
                <button type="button" class="btn btn-outline-secondary">9:00</button>
              </div>
              <div class="time-card-item">
                <p>外出</p>
                <button type="button" class="btn btn-primary">外出</button>
              </div>
              <div class="time-card-item">
                <p>退社</p>
                <button type="button" class="btn btn-primary">退社</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-6">
        <div class="card">
          <div class="card-header C-card top-schedule-content-card-header">
            <div class="top-schedule-content-card-header-img">
              <img src="../../static/images/forum_active.png" alt="">
              フォーラム
            </div>
            <div class="top-schedule-content-card-header-edit">
              <img src="../../static/images/edit.png" alt="">
            </div>
          </div>
          <div class="card-body">
            <p>
              本社グローバルIP
            </p>
            <p>
              社内容シリアル番号2021年度
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="row mt-4">
      <div class="col-6">
        <div class="card">
          <div class="card-header C-card top-schedule-content-card-header">
            <div class="top-schedule-content-card-header-img">
              <img src="../../static/images/forum_active.png" alt="">
              フォーラム
            </div>
            <div class="top-schedule-content-card-header-edit">
              <img src="../../static/images/edit.png" alt="">
            </div>
          </div>
          <div class="card-body">
            <p>
              テキストテキストテキスト
            </p>
            <p>
              テキストテキストテキストテキスト
            </p>
          </div>
        </div>
      </div>
      <div class="col-6">
        <div class="card">
          <div class="card-header C-card top-schedule-content-card-header">
            <div class="top-schedule-content-card-header-img">
              <img src="../../static/images/forum_active.png" alt="">
              フォーラム
            </div>
            <div class="top-schedule-content-card-header-edit">
              <img src="../../static/images/edit.png" alt="">
            </div>
          </div>
          <div class="card-body top-schedule-content-card-content">
            <div class="time-card-list">
              <div class="time-card-item">
                <p>模态框示例</p>
                <button type="button" class="btn btn-outline-secondary">点击我</button>
              </div>
              <div class="time-card-item">
                <p>消息提示框</p>
                <button type="button" class="btn btn-primary msg">点击我</button>
              </div>
              <div class="time-card-item">
                <p>alert框</p>
                <button type="button" class="btn btn-primary T-alert">点击我</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<style>
  .top-page {
    padding-bottom: 70px;
  }
  .row {
    justify-content: center;
    align-items: center;
  }
  .schedule-item{
    border-right: none;
  }
  .schedule-item:last-child {
    position: relative;
  }
  .schedule-item .schedule-item-header {
    background: #E9E9E9;
    padding: 3px 85px;
    text-align: center;
    font-size: 15px;
    color: #4D4D4D;
    border: 1px solid #E5E5E5; 
    border-right: none;
  }
  .schedule-item .schedule-item-header .schedule-data{
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .schedule-item .schedule-item-header .current{
    background: #FF0000;
    color: #fff;
  }
  .schedule-item:last-child .schedule-item-header {
    border-right: 1px solid #E5E5E5;
  }
  .schedule-item .schedule-item-content {
    height: 94px;
    background: #F4F4F4;
    border: 1px solid #DDDDDD;
    border-right: none;
    padding: 1rem;
  }
  .schedule-item .has-content {
    background: #fff;
  }
  .schedule-item:last-child .schedule-item-content {
    border-right: 1px solid #DDDDDD;
  }
  .top-page .top-schedule-header .schedule-operate {
    display: flex;
    flex-direction: row-reverse;
    position: absolute;
    top: -2.7rem;
    right: 0;
    align-items: center;
  }
  .top-page .top-schedule-header .schedule-operate .operate-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #60C5FF;
    cursor: pointer;
    position: relative;
    margin: 0.25rem;
  }
  .top-page .top-schedule-header .schedule-operate .operate-icon::after {
    content: ' ';
    display: block;
    position: absolute;
    width: 15px;
    height: 2px;
    background: #fff;
    left: 0.5rem;
    top: 0.9rem;
  }
  .top-page .top-schedule-header .schedule-operate .operate-icon::before {
    content: ' ';
    display: block;
    position: absolute;
    width: 2px;
    height: 15px;
    background: #fff;
    left: 0.9rem;
    top: 0.5rem;
  }
  .top-page .top-schedule-content {
    margin-top: 1.875rem;
  }
  .top-page .top-schedule-content .top-schedule-content-card-header-img {
    display: flex;
    align-items: center;
  }
  .top-page .top-schedule-content .top-schedule-content-card-header-edit {
    cursor: pointer;
  }
  .top-page .top-schedule-content .top-schedule-content-card-content .time-card-list {
    display: flex;
    justify-content: space-around;
  }
  .top-page .top-schedule-content .top-schedule-content-card-content .time-card-list .time-card-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .top-page .top-schedule-content .top-schedule-content-card-content .time-card-list .time-card-item button {
    width: 130px;
  }
  .top-page .top-schedule-content .row {
    justify-content: start;
  }
</style>